<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>补卡审批记录</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="supplementcard-approval-record">
      <div>
        <search-btn-view btn-text="查询审批记录" @before-open="resetSearch" @search="searchData">
          <template slot="append">
            <el-button type="primary" size="medium" @click="exportExcel">导出Excel</el-button>
          </template>
          <div slot="search-content">
            <search-form :search="search" :person-list="personList" mode="supplementCard"></search-form>
          </div>
        </search-btn-view>
      </div>
      <div class="supplementcard-approval-table-div" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table fit stripe border class="takeoff-approval-table" :data="records" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="审批编号" prop="approvalNo" min-width="140px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="打卡时间" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.baseCheckTime).format('YYYY-MM-DD HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="缺卡原因" prop="reason" :show-overflow-tooltip="true" min-width="100px" header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="审批状态" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`approvalRecord.status.${scope.row.state}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="审批记录" prop="cardInfo" :show-overflow-tooltip="true" min-width="180px" header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="提交人" prop="submitterName" min-width="80px"></el-table-column>
          <el-table-column :resizable="false" label="部门" prop="deptName" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="提交时间" min-width="145px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/deptTransfer.css",
    "../components/css/deptPersonSelect.css",
    "../components/css/approvalSearchForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/deptTransfer.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js"
  ]);

</script>
<script src="../components/deptPersonSelect.js"></script>
<script src="../components/approvalSearchForm.js"></script>
<script src="../mixins/approvalRecordMixin.js"></script>
<script>
  var app = new Vue({
    el: '#app',

    mixins: [approvalRecordMixin('supplementCard')],

    methods: {
      formatRecords: function (records) {
        for (var i = 0; i < records.length; i++) {
          var record = records[i];
          var createTime = record.createTime;
          createTime = moment(createTime).format('YYYY-MM-DD HH:mm');
          var cardArr = [`${record.submitterName}|${createTime}|提交申请`];

          var cardList = record.processList;
          for (var j = 0; j < cardList.length; j++) {
            var card = cardList[j];
            var dealwithTime = card.dealwithTime;
            dealwithTime = moment(dealwithTime).format('YYYY-MM-DD HH:mm');
            var status = card.dealwithState;
            var statusStr = i18n.getMsg(`approvalRecord.approvalStats.${status}`);
            var str = `${card.approverName}|${dealwithTime}|${statusStr}`;
            cardArr.push(str);
          }
          record.cardInfo = cardArr.join('；');
        }
      },

      exportExcel: function () {
        var search = this.oldSearch;
        var postData = this.getPostData(search);
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/dingTalk/exprotFillcardApplicationRecord?${formParam}`;
        window.open(path);
      }
    }
  });

</script>
<style>
  .supplementcard-approval-record {
    padding: 10px 20px;
    padding-bottom: 5px;
    height: calc(100% - 15px);
  }

  .supplementcard-approval-record .supplementcard-approval-table-div {
    height: calc(100% - 46px);
    overflow: auto;
  }

  .supplementcard-approval-record .supplementcard-approval-table-div.hasPage {
    height: calc(100% - 88px);
  }

</style>

</html>
